<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="login_form"
          :model="loginInfo"
          :rules="rules"
          ref="loginForms"
        >
          <h1>Hello!</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginInfo.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              show-password
              v-model="loginInfo.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              type="primary"
              size="default"
              @click="login"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus' //提示成功登录或失败
import type { FormRules } from 'element-plus' //表单校验
import { getTime } from '@/utils/time' //封装的时间识别
// 引入相关的用户仓库
import useUserStore from '@/store/modules/user'
const useStore = useUserStore()
// 收集到用户信息  这里先写死
const loginInfo = reactive({ username: 'admin', password: '111111' })
// 自定义校验表单 比如 密码必须为数字之类的
// rule:校验规则对象
// value：表单元素的文本内容
// 函数如果符合条件 就通过 callback放行
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback()
  } else {
    callback(new Error('用户名不得低于5'))
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback()
  } else {
    callback(new Error('密码不能小于6位'))
  }
}
// 表单校验 用户名不得低于五位 密码不得低于6位数 或者在6-12之间
const rules = reactive<FormRules>({
  //required 是否必须校验
  //trigger是什么时候提示 比如trigger:'change' 是文本发生改变时提示
  username: [
    // {required:true, min:3, max:6, message:'用户名长度至少3位', trigger:'change'},
    { validator: validateUsername, trigger: 'change' },
  ],
  password: [
    { validator: validatePassword, trigger: 'change' },
    // {required:true,min:6, max:8, message:'密码至少6位', trigger:'change'}
  ],
})
// 获取路由器
const $router = useRouter()
const $route = useRoute()
// 添加登录按钮 加载的效果
const loading = ref(false)
// 收集所有表单
const loginForms = ref()

// 给登录按钮添加点击事件
const login = async () => {
  // 先收集所有表单 所有表单校验通过了 再继续访问接口
  // console.log(loginForms.value);
  // loginForms.value身上的validate方法 会返回一个promise对象
  await loginForms.value.validate()

  // 成功的话就加载一下
  loading.value = true
  // 点击后 通知仓库发送登录请求 actions里面的方法
  // 登录成功了 - 跳转到首页
  // 登录失败 那就弹出一个提示框
  try {
    // 保证登陆成功 跳转到首页
    await useStore.userLogin(loginInfo)
    // 登陆成功 跳转首页
    // $router.push('/')
    // 由于我们写退出登录时 会遇到 从哪个页面退出 我们希望再登录进入时还是那个页面 就需要根据退出时携带的路由参数去进行跳转  如果有 就进入当时的页面 没有就默认进入首页
    const redirect: any = $route.query.redirect
    $router.push({ path: redirect || '/' })

    // 弹出成功登录提示框
    ElNotification({
      message: '欢迎回来',
      type: 'success',
      title: `哈喽，${getTime()}好！`,
      // showClose: false, //提示框自己关闭
    })
    // 登录后结束加载
    loading.value = false
  } catch (error) {
    // 登录失败也停止加载转圈
    loading.value = false
    ElNotification({
      message: (error as Error).message,
      type: 'error',
      // showClose: false,
    })
  }
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}
.login_form {
  position: relative;
  width: 60%;
  background-color: brown;
  top: 30vh;
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 20px 20px;
  h1 {
    font-size: 40px;
    color: #fff;
  }
  h2 {
    font-size: 14px;
    color: #fff;
    margin: 15px 0;
  }
  .login_btn {
    width: 100%;
  }
}
</style>
